<template>
  <div>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <!-- 日期选择框 -->
            <a-col :span="6">
              <a-form-item label="日期选择框"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-range-picker @change="dateChange" />
              </a-form-item>
            </a-col>
            <!-- 级联选择框 -->
            <a-col :span="6">
              <a-form-item label="级联选择框"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-cascader :options="options"
                            placeholder="Please select"
                            @change="cascaderChange" />
              </a-form-item>
            </a-col>
            <!-- 多选框 -->
            <a-col :span="6">
              <a-form-item label="多选框"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-checkbox :checked="checked"
                            :disabled="checkboxDisabled"
                            @change="checkboxChange">
                  {{ label }}
                </a-checkbox>
                <a-button type="primary"
                          size="small"
                          @click="toggleChecked">
                  {{ !checked ? 'Check' : 'Uncheck' }}
                </a-button>
                <a-button :style="{ marginLeft: '10px' }"
                          type="primary"
                          size="small"
                          @click="toggleDisable">
                  {{ !checkboxDisabled ? 'Disable' : 'Enable' }}
                </a-button>
              </a-form-item>
            </a-col>
            <!-- 多选框父子联动 -->
            <a-col :span="6">
              <a-form-item label="多选框父子关联"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-checkbox :indeterminate="indeterminate"
                            :checked="checkAll"
                            @change="onCheckAllChange">
                  Check all
                </a-checkbox>
                <a-checkbox-group v-model="checkedList"
                                  :options="plainOptions"
                                  @change="checkboxgroupChange" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="10">
              <a-form-item label="单选框"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-radio-group default-value="a"
                               button-style="solid">
                  <a-radio-button value="a"> Hangzhou </a-radio-button>
                  <a-radio-button value="b"> Shanghai </a-radio-button>
                  <a-radio-button value="c"> Beijing </a-radio-button>
                  <a-radio-button value="d"> Chengdu </a-radio-button>
                </a-radio-group>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <a-radio-group v-model="radioValue"
                               @change="radioChange">
                  <a-radio :value="1"> A </a-radio>
                  <a-radio :value="2"> B </a-radio>
                  <a-radio :value="3"> C </a-radio>
                  <a-radio :value="4"> D </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="选择框"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-select show-search
                          placeholder="Select a person"
                          option-filter-prop="children"
                          style="width: 200px"
                          :filter-option="filterOption"
                          @focus="selectFocus"
                          @blur="selectBlur"
                          @change="selectChange">
                  <a-select-option value="jack"> Jack </a-select-option>
                  <a-select-option value="lucy"> Lucy </a-select-option>
                  <a-select-option value="tom"> Tom </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="开关"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-switch default-checked
                          @change="switchChange"
                          :disabled="switchDisabled"
                          style="margin-right: 5px" />
                <a-button type="primary"
                          @click="switchToggle"> Toggle disabled </a-button>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="时间选择框"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-time-picker @change="timeChange" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="树状选择框"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-tree-select show-search
                               style="width: 100%"
                               :value="treeValue"
                               :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                               placeholder="Please select"
                               allow-clear
                               multiple
                               tree-default-expand-all
                               @change="treeChange"
                               @search="treeSearch"
                               @select="treeSelect">
                  <a-tree-select-node key="0-1"
                                      value="parent 1"
                                      title="parent 1">
                    <a-tree-select-node key="0-1-1"
                                        value="parent 1-0"
                                        title="parent 1-0">
                      <a-tree-select-node key="random"
                                          value="leaf1"
                                          title="my leaf" />
                      <a-tree-select-node key="random1"
                                          value="leaf2"
                                          title="your leaf" />
                    </a-tree-select-node>
                    <a-tree-select-node key="random2"
                                        value="parent 1-1"
                                        title="parent 1-1">
                      <a-tree-select-node key="random3"
                                          value="sss">
                        <b slot="title"
                           style="color: #08c">sss</b>
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="上传文件"
                           :labelCol="{ span: 2 }"
                           :wrapperCol="{ span: 2 }">
                <a-upload name="file"
                          :multiple="true"
                          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                          :headers="headers"
                          @change="uploadChange">
                  <a-button>
                    <a-icon type="upload" /> Click to Upload
                  </a-button>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <!-- 验证表单 -->
        <a-form :form="form"
                layout="inline">
          <a-row :gutter="24">
            <a-col :span="5">
              <a-form-item :label-col="formItemLayout.labelCol"
                           :wrapper-col="formItemLayout.wrapperCol"
                           label="Name">
                <a-input v-decorator="['username', { rules: [{ required: true, message: 'Please input your name' }] }]"
                         placeholder="Please input your name" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item :label-col="formItemLayout.labelCol"
                           :wrapper-col="formItemLayout.wrapperCol"
                           label="Nickname">
                <a-input v-decorator="[
                    'nickname',
                    { rules: [{ required: checkNick, message: 'Please input your nickname' }] },
                  ]"
                         placeholder="Please input your nickname" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item :label-col="formTailLayout.labelCol"
                           :wrapper-col="formTailLayout.wrapperCol">
                <a-checkbox :checked="checkNick"
                            @change="nickChange"> Nickname is required </a-checkbox>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item :label-col="formTailLayout.labelCol"
                           :wrapper-col="formTailLayout.wrapperCol">
                <a-button type="primary"
                          @click="check"> Check </a-button>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <!-- 模态框 -->
                <a-button type="primary"
                          @click="modelClick"> 显示模态框 </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 滑动滚动条 -->
      <div>
        <span>滑动滚动条：</span>
        <a-slider :default-value="30"
                  :reverse="reverse" />
        <a-slider range
                  :default-value="[20, 50]"
                  :reverse="reverse" />
        Reversed:
        <a-switch size="small"
                  :checked="reverse"
                  @change="sliderReverseChange" />
      </div>
      <!-- 步骤条 -->
      <div style="margin: 10px 0">
        <span>步骤条：</span>
        <a-steps :current="stepsCurrent"
                 style="margin: 10px 0">
          <a-step v-for="item in steps"
                  :key="item.title"
                  :title="item.title" />
        </a-steps>
        <div class="steps-action">
          <a-button v-if="stepsCurrent < steps.length - 1"
                    type="primary"
                    @click="next"> Next </a-button>
          <a-button v-if="stepsCurrent == steps.length - 1"
                    type="primary"
                    @click="$message.success('Processing complete!')">
            Done
          </a-button>
          <a-button v-if="stepsCurrent > 0"
                    style="margin-left: 8px"
                    @click="prev"> Previous </a-button>
        </div>
      </div>
      <!-- 穿梭框 -->
      <div>
        <a-transfer :data-source="mockData"
                    show-search
                    :filter-option="transferFilterOption"
                    :target-keys="targetKeys"
                    :render="(item) => item.title"
                    @change="transferChange"
                    @search="transferSearch" />
      </div>
      <!-- 走马灯(选项卡) -->
      <div style="margin: 10px 0">
        <a-radio-group v-model="dotPosition"
                       button-style="solid"
                       style="margin-bottom: 8px">
          <a-radio-button value="top"> Top </a-radio-button>
          <a-radio-button value="bottom"> Bottom </a-radio-button>
          <a-radio-button value="left"> Left </a-radio-button>
          <a-radio-button value="right"> Right </a-radio-button>
        </a-radio-group>
        <a-carousel :dot-position="dotPosition">
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
        </a-carousel>
      </div>
      <!-- 折叠面板 -->
      <div>
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1"
                            header="This is panel header 1">
            <p>{{ collapseText }}</p>
          </a-collapse-panel>
          <a-collapse-panel key="2"
                            header="This is panel header 2"
                            :disabled="false">
            <p>{{ collapseText }}</p>
          </a-collapse-panel>
          <a-collapse-panel key="3"
                            header="This is panel header 3"
                            disabled>
            <p>{{ collapseText }}</p>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <!-- 模态框组件 -->
      <test-modal @fatherClick="fatherClick"
                  :visible="visible"></test-modal>
    </a-card>
  </div>
</template>

<script>
import TestModal from '../../components/modals/TestModal.vue'
import moment from 'moment'

const plainOptions = ['Apple', 'Pear', 'Orange']
const defaultCheckedList = ['Apple', 'Orange']
// form表单
const formItemLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 2 },
}
const formTailLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 2, offset: 4 },
}
export default {
  name: 'TestComponent',
  components: {
    TestModal,
  },
  data () {
    return {
      // 级联
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ],
      // 多选框
      checked: true,
      checkboxDisabled: false,
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,
      // form表单
      checkNick: false,
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
      // testmodel组件是否显示
      visible: false,
      // 单选框值
      radioValue: 1,
      // 滑动输入条反转值
      reverse: false,
      // 开关是否可以编辑
      switchDisabled: false,
      // 步骤条
      stepsCurrent: 0,
      steps: [
        {
          title: 'First',
          content: 'First-content',
        },
        {
          title: 'Second',
          content: 'Second-content',
        },
        {
          title: 'Last',
          content: 'Last-content',
        },
      ],
      // 穿梭框
      mockData: [],
      targetKeys: [],
      // 树状选择框
      treeValue: undefined,
      // 上传文件
      headers: {
        authorization: 'authorization-text',
      },
      // 走马灯(选项卡)
      dotPosition: 'top',
      // 折叠面板
      collapseText: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
      activeKey: ['1'],
    }
  },
  computed: {
    label () {
      const { checked, checkboxDisabled } = this
      return `${checked ? 'Checked' : 'Unchecked'}-${checkboxDisabled ? 'Disabled' : 'Enabled'}`
    },
  },
  // 监听
  watch: {
    // 监听折叠面板改变事件
    activeKey (key) {
      console.log(key)
    },
  },
  methods: {
    // 日期选择框范围改变事件
    dateChange (data, dataString) {
      console.log(data, dataString)
    },
    // 级联选择完成改变事件
    cascaderChange (value) {
      console.log(value)
    },
    // 是否选中多选框
    toggleChecked () {
      this.checked = !this.checked
    },
    // 是否可以修改
    toggleDisable () {
      this.disabled = !this.disabled
    },
    // 选中改变事件
    checkboxChange (e) {
      this.checked = e.target.checked
      console.log(e.target)
    },
    // 勾选单个多选框触发
    checkboxgroupChange (checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length
      this.checkAll = checkedList.length === plainOptions.length
      console.log(checkedList)
    },
    // 当勾选全选时触发
    onCheckAllChange (e) {
      console.log(e.target)
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      })
    },
    // form表单的事件
    check () {
      this.form.validateFields((err) => {
        if (!err) {
          console.info('success')
        }
      })
    },
    nickChange (e) {
      this.checkNick = e.target.checked
      this.$nextTick(() => {
        this.form.validateFields(['nickname'], { force: true })
      })
    },
    // 点击显示模态框按钮触发
    modelClick () {
      this.visible = true
    },
    // 传递给testmodel组件事件
    fatherClick () {
      this.visible = false
    },
    // 单选框改变事件
    radioChange (e) {
      console.log('radio checked', e.target.value)
    },
    // 选择框触发事件
    selectChange (value) {
      console.log(`selected ${value}`)
    },
    selectBlur () {
      console.log('blur')
    },
    selectFocus () {
      console.log('focus')
    },
    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 反转开关改变触发
    sliderReverseChange (reverse) {
      this.reverse = reverse
    },
    // 开关切换事件
    switchChange (checked, event) {
      console.log(checked, event)
    },
    // 开关disabled改变事件
    switchToggle () {
      this.switchDisabled = !this.switchDisabled
    },
    // 步骤条上一步下一步点击触发
    next () {
      this.stepsCurrent++
    },
    prev () {
      this.stepsCurrent--
    },
    // 时间选择框改变事件
    moment,
    timeChange (time, timeString) {
      console.log(time, timeString)
    },
    // 穿梭框触发事件
    getMock () {
      const targetKeys = []
      const mockData = []
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        }
        if (data.chosen) {
          targetKeys.push(data.key)
        }
        mockData.push(data)
      }
      this.mockData = mockData
      this.targetKeys = targetKeys
    },
    transferFilterOption (inputValue, option) {
      return option.description.indexOf(inputValue) > -1
    },
    transferChange (targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
      this.targetKeys = targetKeys
    },
    transferSearch (dir, value) {
      console.log('search:', dir, value)
    },
    // 树状选择触发
    treeChange (value) {
      console.log(value)
      this.treeValue = value
    },
    treeSearch () {
      console.log(...arguments)
    },
    treeSelect () {
      console.log(...arguments)
    },
    // 上传文件触发
    uploadChange (info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
  },
  mounted () {
    this.getMock()
  },
}
</script>

<style scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>